<template>
    <div class="wrapper">
      <h3>校 园 地 图 （育才校区）</h3>
      <div class="mapImg" v-for="item in mapImgList">
        <img :src="item.src">
        <h4>{{item.title}}</h4>
      </div>
    </div>
</template>

<script>
    export default {
        name: "CampusMap",
        data(){
            return{
                mapImgList: [
                    {
                        src: require('../../assets/img/yc-map.jpg'),
                        title: '广西师范大学育才校区'
                    },
                    {
                        src: require('../../assets/img/yc-address.png'),
                        title: '育才校区地理位置'
                    },
                    {
                        src: require('../../assets/img/gxsdyc-map.png'),
                        title: '育才校区艺术图'
                    },
                    {
                        src: require('../../assets/img/gxsdyc-map3.jpeg'),
                        title: '育才校区各建筑物标识'
                    },
                    {
                        src: require('../../assets/img/gxsdyc-map2.jpg'),
                        title: '广西师大育才校区简图'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
  .wrapper{
    padding-left: 5%;
  }
  h3{
    text-align: center;
    margin: 30px 0;
    color: #0057A7;
  }
  img{
    width: 100%;
  }
  h4{
    text-align: center;
    font-size: 16px;
  }
  .mapImg{
    margin: 30px 0;
  }
</style>
